<template>
  <div class="ali-callback">
    <Empty image="error"
      v-if="state.data.response.code !== AuthCodeMap.刷脸成功"
      :description="pageState.description" />
    <div class="real-auth" v-else>
      <div
        style="margin: 52px auto; width: 120px; height: 120px;">
        <Image :src="Person" />
      </div>
      <CellGroup>
        <Cell>
          <template #title>
            <div
              style="text-align: center; font-size: 22px; font-weight: 600">
              <span
                style="color: var(--van-primary-color);">您已通过实人认证</span>
            </div>
          </template>
        </Cell>
        <Cell title="真实姓名"
          :value="userStore.userInfo.realName" />
        <Cell title="身份证号" :value="userStore.userInfo.realId.split('')
          .map((i, index) => [6, 7, 8, 9, 10, 11, 12, 13].includes(index) ? '*' : i)
          .join('')" />
      </CellGroup>
      <footer>
        <ul>
          <li>1、身份信息仅供快回收平台提供诚信保证使用。</li>
          <li>2、快回收承若不向其他第三方透露您的个人信息。</li>
        </ul>
      </footer>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  Cell, CellGroup, Empty, Image, showFailToast,
} from 'vant';
import { onMounted } from 'vue';

import Person from '@/assets/images/person-auth.png';
import useUserStore from '@/stores/user.store';

import { AuthCodeMap, AuthSubCodeMap } from '../const';
import useRealAuthCallback from '../hooks/useRealAuthCallback';

const userStore = useUserStore();

const {
  state,
  pageState,
  handleInit,
  initFaceVerify,
} = useRealAuthCallback();

onMounted(async () => {
  handleInit();
  if (!state.value.data.response.extInfo.certifyId) return;
  if (state.value.data.response.code !== AuthCodeMap.刷脸成功) {
    showFailToast(`${AuthCodeMap[state.value.data.response.code]}，${AuthSubCodeMap[state.value.data.response.subCode]}`);
    pageState.value.description = `${AuthCodeMap[state.value.data.response.code]}，${AuthSubCodeMap[state.value.data.response.subCode]}`;
    return;
  }
  await initFaceVerify();
  await userStore.fetchUserInfo();
});

</script>
<style lang="less" scoped>
.ali-callback {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .real-auth {
    height: 100%;
    display: flex;
    flex-direction: column;

    footer {
      margin: auto 0 10px;
      padding: 0 20px;
      color: #999;
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
    }
  }
}
</style>
